<template>
	<view>
		<view class="hello">
		  <view class="top-box">
		    <view class="welcome">
		       绑定安全手机
		    </view>
		  </view>
		  <view class="lower">
		    <view class="picture">
		    </view>
		    <view class="lower-box">
		      <view class="login">您当前没有绑定手机号,请先进行绑定。</view>    
		        <view>                  <!--判断手机号-->
		          <input v-model="phone" class="inputText"placeholder="请输入手机号"  bindinput="getPhone" />		          
		        </view>
				 <button type="primary"   class="letter" style="background-color: #3F76EE;"  bindtap="send">短信验证码</button>
		        <view style="display: flex;">         <!--判断验证码-->
		          <input class="inputText" placeholder="请输入验证码"  bindinput="getCode"  />	         
		        </view>
		        <button class="sign" style="width: 400rpx;" formType="submit"  @click="login" >下一部</button>
		      <view class="group">
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				phone:''
			};
		},
		methods: {
			async login() {
				uni.setStorageSync('phone',this.phone),
				console.log('你点击了按钮')
				let one = await axios({			
					method:'post',
					url: 'http://192.168.1.56:9091/register',				
					data: {
						phonenumber: this.phone,
						loginName:this.phone,
					}
				})
				.then(res => {
					if (res.data.code == 500) {
						console.log(res.data.msg)
					} else if (res.data.code == 0) {
						console.log(res.data.msg)
						uni.redirectTo({
							url: '../more/more'
						});
					} else {
						console.log(res.data.msg)
					}
					console.log(res, '发送了请求，接收的数据')
				})
				let two = await axios({
					method: 'get',
					url: this.url.list,
				}).then(res => {
					this.formData = res.data
				})
			}
		},
	}
</script>

<style lang="scss">
.hello {
  background-color: #3F76EE;
}
.welcome-two {
  margin-top: 35rpx;
}

.top-box {
  text-align: center;  
  line-height: 100px;  
  color: aliceblue;
}

.top-signin {
  font-size: 45rpx;
}

.top-welcome {
  font-size: 30rpx;
  margin-top: 15rpx;
  font-weight: bold;
}

.welcome-out {
  font-size: 50rpx;
}

.welcome-register {
  margin-right: 50rpx;
}

.picture image {
  margin-left: 100rpx;
  margin-top: -80rpx;
  width: 600rpx;
  height: 450rpx;
}

.lower {
  margin-top: -30rpx;
  width: 100vw;
  border-radius: 60rpx 60rpx 0rpx 0rpx;
  background-color: #FFFFFF;
}
.input {
  font-size: 25rpx;
}

.lower-box view {
  margin-left: 80rpx;
  padding-top: 40rpx;
  padding-top: 50rpx;
}

.obtain {
  position: absolute;
  left: 100rpx;
  border: 1px solid #3F76EE;
  border-radius: 60px;
  width: 200rpx;
  height: 10rpx;
  position: relative;
  color: #3F76EE;
}

.code {
  position: absolute;
  top: 10rpx;
  left: 40rpx;
  font-size: 25rpx;
}

.login {
  font-size: 30rpx;
  font-weight: bold;
  color: #acacac;
}

.group {
  position: absolute;
  left: 230rpx;
}

.sign {
  border: 1px solid #ccc;
  border-radius: 60px;
  margin-top: 30rpx;
  font-size: 30rpx;
  color: #f7f7f8;
  background-color: #3F76EE;
  margin-top: 70rpx;
}
.inputText{
	width: 80%;
	border-bottom:  1rpx solid #ccc;
}

.liness {
  border: 1px solid #ccc;
  border-radius: 20px;
  float: right;
  margin-top: 9px;
  color: #cccccc;
}

.letter {
  background-color: #3F76EE;
  margin-top: -50rpx;
  margin-left: 100rpx;
  font-size: 25rpx;
  width: 200rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  position: absolute;
  top: 450rpx;
  left: 300rpx;
}

</style>
